<template>
	<view class="main">
		<home-head :userInfo="userInfo"></home-head>

		<view class="user-trend"  @tap="toMineTrend">
			<view class="user-trend-title">我的动态</view>
			<view class="user-trend-imgs">
				<view  v-for="(trendImg,index) in userInfo.trendImgs" :key="'trendImg'+index">
					<image :src="trendImg" mode="aspectFill"></image>
				</view>
				<view class="icon iconfont icon-youjiantou"></view>
			</view>
		</view>

		<!-- 相册 -->
		<view class="user-album">
			<view class="user-album-title">
				<view class="album-title">我的相册</view>
				<view class="album-more"  @tap="toUserAlbum">查看</view>
			</view>
			<view class="user-album-body" >
				<block v-for="(img,index) in userInfo.albums" :key="'img'+index">
					<image :src="img" mode="aspectFill"></image>
				</block>

				<image v-if="userInfo.albums&&userInfo.albums.length>0&&userInfo.albums.length<4" src="../../static/home/user-album-z.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="operation-list">
			<block v-for="(opt,index) in operationList" :key="'opt'+index">
				<view class="operation-item" @tap=toPage(opt)>
					<image :src="opt.url" mode="aspectFill"></image>
					<view class="">{{opt.name}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import homeHead from '../../components/home/home-head.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
import imageCache from '../../components/image-cache/image-cache.vue'; 
export default {
	components: {
		homeHead,
		imageCache
	},
	data() {
		return {
			userInfo: {},
			customer:{},
			operationList:[]
		};
	},methods:{
		toMineTrend(){
			uni.navigateTo({
				url:'../mine-teend/mine-teend'
			})
		},
		toUserAlbum(){
			uni.navigateTo({
				url:'../user-album/user-album'
			})
		},
		toPage(opt){
			if(opt.toPage){
				uni.navigateTo({
					url:opt.toPage
				})
			}
		},
		loadMine(){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.mine,
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.userInfo=res.data.data;
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					console.log(r);
				}
			});
		},
		buildData(){
			return [{
				url:'../../static/home/task.png',
				type:'task',
				name:'任务中心',
				toPage:'../task-list/task-list'
			},{
				url:'../../static/home/vip.png',
				type:'vip',
				name:'会员中心',
				toPage:'../vip/vip'
			},{
				url:'../../static/home/wallet.png',
				type:'wallet',
				name:'钱包',
				toPage:'../wallet/wallet'
			},{
				url:'../../static/home/follow.png',
				type:'follow',
				name:'我的关注',
				toPage:'../mine-follow/mine-follow'
			},{
				url:'../../static/home/customer.png',
				type:'customer',
				name:'我的客服',
				toPage:`../chatroom/chatroom?user=${JSON.stringify(this.customer)}`
			},{
				url:'../../static/home/setting.png',
				type:'setting',
				name:'设置',
				toPage:'../setting/setting'
			},{
				url:'../../static/home/auth.png',
				type:'auth',
				name:'实名认证',
				toPage:'../auth/auth'
			}];
		}
	},
	onLoad() {
		this.loadMine();
		this.customer = uni.getStorageSync(constant.customer);
		this.operationList=this.buildData();
	}
};
</script>

<style lang="less" scoped>
.main {
	background: #f5f7fa;
}
.user-trend {
	padding: 20rpx 40rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	margin-bottom: 20rpx;

	.user-trend-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.user-trend-imgs {
		display: flex;
		flex-direction: row;
		align-items: center;
		image {
			width: 95rpx;
			height: 95rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.icon-youjiantou {
			font-weight: 500;
			font-size: 38rpx;
			color: #333333;
		}
	}
}

.user-album{
	padding: 0 40rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
	.user-album-title{
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.album-title{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			
		}
		.album-more{
			font-size: 28rpx;
			color: #999999;
		}
	}
	.user-album-body{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}
	}
}

.operation-list{
	padding: 0 40rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	background-color: #FFFFFF;
	.operation-item{
		margin-top: 15rpx;
		width: 33.3333%;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 72rpx;
			height: 72rpx;
		}
		
		view{
			font-size: 28rpx;
			color: #333333;
		}
	}
}
</style>
